<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>双十一倒计时</title>
  <style type="text/css">
    .time-item {
      width: 450px;
      height: 45px;
      margin: 0 auto;
    }

    .time-item strong {
      background: orange;
      color: #fff;
      line-height: 49px;
      font-size: 36px;
      font-family: Arial;
      padding: 0 10px;
      margin-right: 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .time-item>span {
      float: left;
      line-height: 49px;
      color: orange;
      font-size: 32px;
      margin: 0 10px;
      font-family: Arial, Helvetica, sans-serif;
    }

    .title {
      width: 380px;
      height: 50px;
      margin: 200px auto 50px auto;
      text-align: center;
    }

    .time-item p {
      text-align: center;
      height: 50px;
      font-size: 32px;
    }
  </style>

</head>

<body>
  <h1 class="title"></h1>

  <div class="time-item">
    <span><span id="day">00</span>天</span>
    <strong><span id="hour">00</span>时</strong>
    <strong><span id="minute">00</span>分</strong>
    <strong><span id="second">00</span>秒</strong>
    <p>准备好剁手了吗？</p>
  </div>


  <script>
    var title = document.querySelector('.title')
    var day = document.querySelector('#day')
    var hour = document.querySelector('#hour')
    var minute = document.querySelector('#minute')
    var second = document.querySelector('#second')
    var getyear = new Date()
    var disTime = new Date(getyear.getFullYear() + '-11-11 00:00:00')
    title.innerHTML = '距离' + getyear.getFullYear() + '年双十一，还有'
    function countDown() {
      var now = new Date()//获取当前的时间戳
      var ts = (disTime - now) / 1000   //用户输入的时间戳减去获取的时间戳，得到相差多少秒
      var d = parseInt(ts / 60 / 60 / 24)//天
      var h = parseInt(ts / 60 / 60 % 24)//时
      var m = parseInt(ts / 60 % 60)//分
      var s = parseInt(ts % 60)//秒
      d = d < 10 ? '0' + d : d
      day.innerText = d
      h = h < 10 ? '0' + h : h
      hour.innerText = h
      m = m < 10 ? '0' + m : m
      minute.innerHTML = m
      s = s < 10 ? '0' + s : s
      second.innerHTML = s

    }
    countDown()//计时前先调用一次函数
    setInterval(countDown, 1000)

  </script>
</body>

</html>